/*
 * @description: 商城财务
 * @Author: along
 * @Date: 2020-04-10
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container finance">
        <!-- header -->
        <div class="_finance_header">
            <p class="_finance_title">财务总览</p>
            <p class="_finance_account" @click="() => {
                this.$router.push({
                    name: 'accountSetting'
                })
            }">账户设置</p>
        </div>

        <!-- desc -->
        <div class="_finance_desc">温馨提示：因国家金融政策、第三方支付调整可能会出现数据延迟，如有疑问可以联系service@zsdx.cn或者直接咨询我们的客户经理</div>

        <!-- info -->
        <div class="_static">

            <!-- 累计到账 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">累计到账</p>
                    </div>
                </div>
                <div class="_static_money">
                    <p class="_static_price">{{ formData.withdrew_money | filterValue }}</p>
                    <p class="_static_text">元</p>
                </div>
                <p class="_static_content">
                    账户累计到账金额
                </p>
                <img src="@/assets/image/finance_icon1.png" class="_static_icon">
            </div>

            <!-- 到账中 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">到账中</p>
                        <el-tooltip
                            effect="light"
                            placement="top"
                            popper-class="pending-money-pop"
                        >
                            <div
                                class="desc-tip"
                                slot="content"
                            >
                                为账期结束，微信/支付宝解除冻结后，正在自动到账到您设置的银行卡的金额；到账时间为1-3个工作日
                            </div>
                            <i
                                class="iconfont icon-question"
                                style="font-size:14px;color:rgba(0, 0, 0, 0.3);margin-left:6px"
                            />
                        </el-tooltip>
                    </div>
                </div>
                <div class="_static_money">
                    <p class="_static_price">{{ formData.waiting_money | filterValue }}</p>
                    <p class="_static_text">元</p>
                </div>
                <p class="_static_content">
                    正在提现到结算银行卡的总金额
                </p>
                <img src="@/assets/image/finance_icon1.png" class="_static_icon">
            </div>

            <!-- 待入账 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">待入账</p>
                    </div>
                </div>
                <div class="_static_money">
                    <p class="_static_price">{{ formData.pending_money | filterValue }}</p>
                    <p class="_static_text">元</p>
                </div>
                <p class="_static_content">
                    买家还未确认收货的待结算金额+确认收货后结算中的金额
                </p>
                <img src="@/assets/image/finance_icon1.png" class="_static_icon">
            </div>

            <!-- 分佣金额 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">分佣金额</p>
                    </div>
                </div>
                <div class="_static_money">
                    <p class="_static_price" :style="{color: 'rgba(47, 189, 179, 1)'}">{{ formData.commission_pay | filterValue }}</p>
                    <p class="_static_text">元</p>
                </div>
                <p class="_static_content">
                    支出的分佣金额的总数
                </p>
                <img src="@/assets/image/finance_icon2.png" class="_static_icon">
            </div>

            <!-- 保证金 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">保证金</p>
                    </div>
                    <div class="_nav_right" @click="fnWithdrawal()">提现</div>
                </div>
                <div class="_static_money">
                    <p class="_static_price">{{ formData.deposit.deposit_money | filterValue }}</p>
                    <p class="_static_text">元</p>
                </div>
                <p class="_static_content">
                    到期时间：{{ formData.deposit.deposit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </p>
                <img src="@/assets/image/finance_icon3.png" class="_static_icon">
            </div>

            <!-- 待支付总金额 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">待支付金额</p>
                        <el-tooltip
                            effect="light"
                            placement="top"
                            popper-class="pending-money-pop"
                        >
                            <div
                                class="desc-tip"
                                slot="content"
                            >
                                待支付金额有两个来源：<br>
                                1 为买家通过支付宝支付购买商品，当该笔金额在账期后自动结算到您的银行卡时，掌上大学为您垫付的手续费；<br>
                                2 因支付宝/微信官方的限制，掌大真实得到的佣金最多只能拿到单笔订单的30%，所以，这就会导致一旦有佣金比例超出30%的商品，则掌大就无法获得完整的佣金金额，即存在超出30%部分的待结算佣金。以上两类，都需要您在每月10号前，人工支付完上月的待支付金额，否则，逾期并超出3个工作日（13号截止），则掌上大学有权采取追究措施
                            </div>
                            <i
                                class="iconfont icon-question"
                                style="font-size:14px;color:rgba(0, 0, 0, 0.3);margin-left:6px"
                            />
                        </el-tooltip>
                    </div>
                    <div class="_nav_right" @click="fnPayCom()">支付</div>
                </div>
                <div class="_static_money _static_money2">
                    <div class="_static_money_left">
                        <p class="_static_price" :style="{color: 'rgba(47, 189, 179, 1)'}">{{ formData.deposit.unpay_bill_money | filterValue }}</p>
                        <p class="_static_text">元</p>
                    </div>
                    <p class="_static_detail" @click="$refs.billDetailDialog.show()">明细</p>
                </div>
                <p class="_static_content">
                    待出账金额：¥{{ formData.deposit.not_settle_bill_money | filterValue }}
                </p>
                <p class="_static_content">
                    本月截止时间：{{ formData.deposit.bill_money_deadline_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </p>
                <img src="@/assets/image/finance_icon4.png" class="_static_icon">
            </div>

            <!-- 订单总量 -->
            <div class="_static_items">
                <div class="_static_nav">
                    <div class="_nav_left">
                        <p class="_static_title">订单总量</p>
                    </div>
                </div>
                <div class="_static_money">
                    <p class="_static_price" :style="{color: 'rgba(32, 160, 255, 1)'}">{{ formData.deposit.order_num | filterValue }}</p>
                    <p class="_static_text">单</p>
                </div>
                <p class="_static_content">
                    已付款订单数量
                </p>
                <img src="@/assets/image/finance_icon5.png" class="_static_icon">
            </div>
        </div>

        <!-- form -->
        <div class="_form">
            <div class="_form_head">
                <p class="_form_title">账单详情</p>
                <p class="_form_export" @click="exportAcount()">导出账单</p>
            </div>
            <div class="_form_wrap">
                <div class="_form_filter">
                    <el-radio-group v-model="ruleForm.status" size="medium" :style="{marginTop: '24px'}" @change="getTableData(1)">
                        <el-radio-button :label="99">全部</el-radio-button>
                        <el-radio-button :label="1">待结算</el-radio-button>
                        <el-radio-button :label="2">结算中</el-radio-button>
                        <el-radio-button :label="-1">已退款</el-radio-button>
                        <el-radio-button :label="3">已到账</el-radio-button>
                    </el-radio-group>
                    <div class="_form_items">
                        <p class="_form_items_title">账单时间</p>
                        <el-date-picker
                            v-model="TIME"
                            type="datetimerange"
                            size="medium"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            @change="getTableData(1)"
                            :default-time="['00:00:00', '23:59:59']"
                            :style="{width: '352px'}"
                        />
                    </div>
                    <div class="_form_items">
                        <p class="_form_items_title">订单编号</p>
                        <el-input
                            v-model="ruleForm.shop_goods_order_no"
                            placeholder="请输入订单编号"
                            size="medium"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getTableData(1)"
                            @keyup.native.enter="getTableData(1)"
                        />
                    </div>
                    <div class="_form_items">
                        <p class="_form_items_title">订单编号</p>
                        <el-input
                            v-model="ruleForm.pay_order_out_trade_no"
                            placeholder="请输入商户订单号"
                            size="medium"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getTableData(1)"
                            @keyup.native.enter="getTableData(1)"
                        />
                    </div>
                </div>

                <!-- 表单 -->
                <div class="_formWrap">
                    <el-table
                        :data="tableData"
                        border
                        size="medium"
                        ref="table"
                        height="100%"
                        style="width: 100%;"
                    >
                        <el-table-column
                            type="index"
                            width="80"
                            label="序号"
                            align="center"
                        />
                        <el-table-column
                            prop="shop_goods_order_no"
                            :formatter="emptyFormatter"
                            label="订单编号"
                            align="center"
                            :width="150"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            prop="pay_order_out_trade_no"
                            :formatter="emptyFormatter"
                            label="商户订单号"
                            align="center"
                            :width="150"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            prop="pay_order_trade_no"
                            :formatter="emptyFormatter"
                            label="服务商单号"
                            align="center"
                            :width="150"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            prop="money"
                            :formatter="emptyFormatter"
                            label="订单金额(元)"
                            :width="110"
                            align="center"
                        >
                            <template slot-scope="scope">
                                {{ Number(scope.row.money).toFixed(2) * 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="profit_sharing_money"
                            :formatter="emptyFormatter"
                            :width="150"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        佣金金额(元)
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="佣金金额"
                                    >
                                        <p>
                                            为该笔订单涉及的商品的商品金额*你设置的佣金比例
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p
                                    v-if="scope.row.commission"
                                    style="text-align:center"
                                >
                                    {{ Number(scope.row.commission).toFixed(2) * 1 }}
                                </p>
                                <p
                                    v-else
                                    style="text-align:center;"
                                >
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="commission"
                            :formatter="emptyFormatter"
                            :width="180"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        真实扣除佣金(元)
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="真实扣除佣金"
                                    >
                                        <p>
                                            为该笔订单的支付金额在结算给您时，支付宝/微信真实扣除的佣金金额
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p
                                    v-if="scope.row.profit_sharing_money"
                                    style="text-align:center;"
                                >
                                    {{ Number(scope.row.profit_sharing_money).toFixed(2) * 1 }}
                                </p>
                                <p
                                    v-else
                                    style="text-align:center;"
                                >
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            :formatter="emptyFormatter"
                            :width="150"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        到账金额(元)
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="到账金额"
                                    >
                                        <p>
                                            为该笔订单的订单金额-真实扣除佣金
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p
                                    style="text-align:center;"
                                    v-if="scope.row.money >= 0 && scope.row.profit_sharing_money >= 0"
                                >
                                    {{ (Number(scope.row.money) - Number(scope.row.profit_sharing_money)).toFixed(2) *1 }}
                                </p>
                                <p
                                    v-else
                                    style="text-align:center;"
                                >
                                    0.00
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="last_commission"
                            :formatter="emptyFormatter"
                            :width="140"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        未结算佣金
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="未结算佣金"
                                    >
                                        <p>
                                            为该笔订单的支付金额在结算给您时未结算扣除的佣金金额，即：佣金金额-真实扣除佣金
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p
                                    v-if="scope.row.last_commission"
                                    style="text-align:center;"
                                >
                                    {{ Number(scope.row.last_commission).toFixed(2) * 1 }}
                                </p>
                                <p
                                    v-else
                                    style="text-align:center;"
                                >
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="pay_service_money"
                            :formatter="emptyFormatter"
                            :width="180"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        支付宝手续费(元)
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="支付宝手续费"
                                    >
                                        <p>
                                            为买家通过支付宝支付购买商品，当该笔金额在账期后自动结算到您的银行卡时，掌上大学为您垫付的手续费
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p
                                    v-if="scope.row.pay_service_money"
                                    style="text-align:center;"
                                >
                                    {{ Number(scope.row.pay_service_money).toFixed(2) * 1 }}
                                </p>
                                <p
                                    v-else
                                    style="text-align:center;"
                                >
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="bill_money"
                            :formatter="emptyFormatter"
                            :width="180"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        待支付总金额
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="待支付总金额"
                                    >
                                        <p>
                                            为未结算金额+支付宝手续费的总和
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p
                                    v-if="scope.row.bill_money"
                                    style="text-align:center;color:#EE4E59"
                                >
                                    {{ Number(scope.row.bill_money).toFixed(2) * 1 }}
                                </p>
                                <p
                                    v-else
                                    style="text-align:center;"
                                >
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="pay_type"
                            :formatter="emptyFormatter"
                            label="账单渠道"
                        >
                            <template slot-scope="scope">
                                <p v-if="scope.row.pay_type == 5">
                                    支付宝
                                </p>
                                <p v-else-if="scope.row.pay_type == 6">
                                    微信
                                </p>
                                <p v-else>
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="create_time"
                            label="账单创建时间"
                            show-overflow-tooltip
                            :width="150"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="profit_wait_time"
                            :formatter="emptyFormatter"
                            :width="150"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px">
                                        剩余结算时间
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="剩余到账时间说明"
                                    >
                                        <p>
                                            剩余到账时间：买方确认收货后需满七天，七天后该订单款项到账<br>
                                            确认收货：如果买方的物流信息为已签收，在24小时后将该买方的订单自动更新为确认收货状态
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == 2 && NOW_TIME">
                                    {{ Number((scope.row.profit_wait_time - NOW_TIME) / 86400).toFixed(2) * 1 }}天
                                </p>
                                <p v-else-if="scope.row.status == 3">
                                    已到账
                                </p>
                                <p v-else>
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="profit_finish_time"
                            label="预计到账时间"
                            :width="150"
                        >
                            <template slot-scope="scope">
                                <p v-if="scope.row.profit_wait_time > 0">
                                    {{ (Number(scope.row.profit_wait_time) + 86400) * 1000 | dateFormatter('yyyy/MM/dd') }}
                                </p>
                                <p v-else>
                                    --
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="status"
                            :formatter="emptyFormatter"
                            show-overflow-tooltip
                        >
                            <template
                                slot="header"
                            >
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:6px;white-space: nowrap;">
                                        状态
                                    </p>
                                    <el-popover
                                        placement="top-start"
                                        width="321"
                                        trigger="hover"
                                        title="状态说明"
                                    >
                                        <p>
                                            待结算：指买方未确认收货的订单款项<br>
                                            结算中：指买方确认收货后正经历7天到账期的款项<br>
                                            已退款：指买方退货的退货订单的款项<br>
                                            已到账：指结算完成正式到账的款项
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-popover-hover"
                                        >
                                            <i
                                                class="el-icon-question"
                                            />
                                        </el-button>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == 1">
                                    <span
                                        class="zd-table-status"
                                        :style="{background: '#FFAF39'}"
                                    />待结算
                                </p>
                                <p v-if="scope.row.status == 2">
                                    <span
                                        class="zd-table-status"
                                        :style="{background: '#4CD964'}"
                                    />结算中
                                </p>
                                <p v-if="scope.row.status == 3">
                                    <span
                                        class="zd-table-status"
                                        :style="{background: '#A6A6A6'}"
                                    />已结算
                                </p>
                                <p v-if="scope.row.status == -1">
                                    <span
                                        class="zd-table-status"
                                        :style="{background: '#FF3030'}"
                                    />已退款
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="date"
                            label="操作"
                            fixed="right"
                        >
                            <template slot-scope="scope">
                                <div>
                                    <el-button
                                        type="text"
                                        @click="fnCheckOrder(scope.row)"
                                    >
                                        查看订单
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <div class="pagination-wrapper clearfixNew">
                        <el-pagination
                            background
                            :current-page.sync="page.now_page"
                            :page-size="page.page_size"
                            layout="total, prev, pager, next, jumper"
                            :total="page.total_count"
                            @current-change="getTableData"
                        />
                    </div>
                </div>
            </div>
        </div>

        <!-- 提现成功弹窗 -->
        <el-dialog
            :visible.sync="dialogWinth"
            width="360px"
            class="zd-dialog"
        >
            <div class="zd-dialog-success">
                <img
                    src="@/assets/image/withdrawal-success.png"
                    class="zd-dialog-logo"
                >
                <p class="zd-dialog-title">
                    提现成功
                </p>
                <p class="zd-dialog-desc">
                    我们将在1-3个工作日之内完成审核
                </p>
                <p
                    class="zd-dialog-button"
                    @click="dialogWinth = false"
                >
                    好的
                </p>
            </div>
        </el-dialog>

        <!-- 明细 -->
        <bill-detail-dialog
            ref="billDetailDialog"
        />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import billDetailDialog from '@/components/manage/market/bill-detail-dialog.vue';
export default {
    components: {
        billDetailDialog
    },
    mixins: [],
    data() {
        return {
            tableData: [
                {
                    bill_money: 0,
                    commission: "0.01",
                    create_time: 1615519297,
                    finance_no: "ef_a027b225821b5",
                    last_commission: 0,
                    money: "0.10",
                    pay_order_out_trade_no: "po_c0e331478876b1d00947d__a5a762",
                    pay_order_trade_no: "4311400971202103126408253108",
                    pay_service_money: "0.00",
                    pay_type: 6,
                    profit_finish_time: 0,
                    profit_sharing_money: "0.01",
                    profit_wait_time: 0,
                    shop_goods_order_category: 0,
                    shop_goods_order_no: "go_5052119b7e6fa36a5b617",
                    status: 1,
                    title: "购买:短袖男潮牌夏季宽松衣服男士潮流半袖体恤纯棉t恤上衣打底衫男装短袖男潮牌夏季宽松衣",
                    type: 1
                }
            ],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            formData: {
                withdrew_money: 0,
                waiting_money: 0,
                not_settle_bill_money: 0,
                commission_pay: 0,
                order_num: 0,
                pending_money: 0,
                unpay_bill_money: 0,
                bill_money_deadline_time: 0,
                deposit: {
                    deposit_money: 0,
                    deposit_time: 0
                }
            },
            ruleForm: {
                status: 99,
                start_time: '',
                end_time: '',
                shop_goods_order_no: '',
                pay_order_out_trade_no: ''
            },
            TIME: [],
            NOW_TIME: 0,
            //提现成功弹窗
            dialogWinth: false
        };
    },
    filters: {
        filterValue (val) {
            if(!val) return 0;
            return val;
        }
    },
    computed: {
    },
    watch: {
        ...mapState({

        })
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '商城财务' }]);
            this.NOW_TIME = parseInt(new Date().getTime() / 1000);
            this.fnGetStatistic();
            this.getTableData(1);
        },

        /**
         * 获取财务列表数据
         */
        getTableData (page) {
            this.$post('', {
                page_id: page || this.page.now_page,
                status: this.ruleForm.status,
                start_time: this.TIME.length > 0 ? this.TIME[0].getTime() / 1000 : '',
                end_time: this.TIME.length > 0 ? this.TIME[1].getTime() / 1000 : '',
                shop_goods_order_no: this.ruleForm.shop_goods_order_no,
                pay_order_out_trade_no: this.ruleForm.pay_order_out_trade_no
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取财务统计信息
         */
        fnGetStatistic () {
            this.$post('/EcommerceFinance/getStatistic', {}, resp => {
                if(resp.code == 1){
                    this.formData = {
                        ...resp.data
                    };
                }else{
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提现
         */
        fnWithdrawal () {
            if (Number(this.formData.deposit.deposit_money == 0)) {
                this.$notify({
                    title: '提示',
                    message: '抱歉，您的保证金为0,不可提现',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            let time = new Date().getTime();

            if (time > this.formData.deposit.deposit_time * 1000) {
                this.$post('', {}, resp => {
                    if (resp.code == 1) {
                        this.fnGetStatistic();
                        this.dialogWinth = true;
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            } else {
                this.$notify({
                    title: '提示',
                    message: '抱歉，您的保证金未到过期时间，暂不可提现',
                    duration: 2000,
                    type: 'warning'
                });
            }
        },

        /**
         * @description 支付佣金
         */
        fnPayCom () {
            let redirect_url = '';
            let base = '';

            console.log( process.env, 'process');

            if(location.host.indexOf('home.wxhand.com') > -1 || location.host.indexOf('b-cms-dev.wxhand.com') > -1) {
                base = 'http://student-api-dev.wxhand.com';
                redirect_url = 'http://b-cms-dev.wxhand.com/finance';
            } else {
                base = 'http://student-api.zsdx.cn';
                redirect_url = 'http://b-cms.wxhand.com/finance';
            }

            this.$post('/EcommerceFinance/payBillMoney',{},resp => {
                if(resp.code == 1) {
                    let order_no = resp.data.pay_order_no;

                    if(order_no) {
                        let url = `${base}/pay/AliPay/web?order_no=${order_no}&redirect_url=${redirect_url}`;

                        window.location.href = url;
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '待支付账单金额为0',
                            type: 'warning'
                        });
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 导出账单
         */
        exportAcount () {
            if(this.TIME === null) {
                this.TIME = [];
            }

            this.$post('/EcommerceFinance/getExportListUrl', {
                status: this.ruleForm.status,
                start_time: this.TIME.length > 0 ? this.TIME[0].getTime() / 1000 : '',
                end_time: this.TIME.length > 0 ? this.TIME[1].getTime() / 1000 : '',
                shop_goods_order_no: this.ruleForm.shop_goods_order_no,
                pay_order_out_trade_no: this.ruleForm.pay_order_out_trade_no
            }, resp => {
                if (resp.code == 1) {
                    window.open(resp.data.export_url);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
        * @description 查看订单
        */
        fnCheckOrder(row) {
            let routeData = this.$router.resolve({
                name: 'orderList',
                query: {
                    order_no: row.shop_goods_order_no,
                    order_type: row.shop_goods_order_category
                },
            });

            window.open(routeData.href, '_blank');
        },

        /**
        * @description 列表渲染辅助函数：列表项为空处理
        */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    },
};
</script>

<style lang="less" scoped>
.finance {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 4px !important;
    }
    ._finance_header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 24px;
        ._finance_title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
        }
        ._finance_account {
            width: 122px;
            height: 36px;
            background-color: rgba(32, 160, 255, 1);
            border-radius: 18px;
            text-align: center;
            line-height: 36px;
            color: #ffffff;
            font-size: 14px;
            cursor: pointer;
        }
    }
    ._finance_desc {
        width: 100%;
        height: 42px;
        background-color: rgba(255, 229, 187, 1);
        line-height: 42px;
        box-sizing: border-box;
        padding-left: 24px;
        color: rgba(172, 116, 23, 1);
        font-size: 14px;
    }
    ._static {
        width: 100%;
        display: flex;
        height: 174px;
        align-items: center;
        background-color: rgba(247, 247, 247, 1);
        align-items: center;
        padding: 12px 0;
        ._static_items {
            width: calc((100% - 72px) / 7);
            height: 150px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-left: 16px;
            padding-top: 16px;
            margin-right: 12px;
            ._static_nav {
                height: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                box-sizing: border-box;
                padding-right: 4px;
                ._nav_left {
                    display: flex;
                    align-items: center;
                    ._static_title {
                        color: rgba(63, 69, 75, 1);
                        font-size: 16px;
                        font-weight: 500;
                        white-space: nowrap;
                    }
                }
                ._nav_right {
                    width: 48px;
                    height: 20px;
                    border: 1px rgba(32, 160, 255, 1) solid;
                    border-radius: 11px;
                    text-align: center;
                    line-height: 20px;
                    color: rgba(32, 160, 255, 1);
                    font-size: 12px;
                    white-space: nowrap;
                    cursor: pointer;
                }
            }
            ._static_money2 {
                justify-content: space-between;
            }
            ._static_money, ._static_money2 {
                height: 30px;
                display: flex;
                align-items: flex-start;
                margin-bottom: 16px;
                box-sizing: border-box;
                padding-right: 16px;
                ._static_price {
                    color: rgba(255, 106, 32, 1);
                    font-size: 30px;
                    height: 30px;
                    line-height: 30px;
                    white-space: nowrap;
                    font-weight: 500;
                    font-family: PingFangSC-Regular, PingFang SC;
                }
                ._static_text {
                    columns: rgba(0, 0, 0, 0.6);
                    font-size: 16px;
                    height: 24px;
                    margin-top: 6px;
                    line-height: 24px;
                    margin-left: 4px;
                }
            }
            ._static_money2 {
                ._static_money_left {
                    height: 30px;
                    display: flex;
                    align-items: flex-start;
                    ._static_price {
                        color: rgba(255, 106, 32, 1);
                        font-size: 30px;
                        height: 30px;
                        line-height: 30px;
                        white-space: nowrap;
                        font-weight: 500;
                        font-family: PingFangSC-Regular, PingFang SC;
                    }
                    ._static_text {
                        columns: rgba(0, 0, 0, 0.6);
                        font-size: 16px;
                        height: 24px;
                        margin-top: 6px;
                        line-height: 24px;
                        margin-left: 4px;
                    }
                }
                ._static_detail {
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    margin-top: 10px;
                    text-decoration: underline;
                    cursor: pointer;
                    position: relative;
                    z-index: 10;
                }
            }
            ._static_content {
                width: 100%;
                box-sizing: border-box;
                padding-right: 16px;
                color: rgba(0, 0, 0, 0.6);
                font-size: 12px;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 17px;
            }
            ._static_icon {
                width: 98px;
                height: 89px;
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 0;
            }
        }
        ._static_items:last-child {
            margin-right: 0px;
        }
    }
    ._form {
        width: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        box-sizing: border-box;
        ._form_head {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            align-items: center;
            padding: 0 24px;
            border-bottom: 1px rgba(235, 238, 245, 1) solid;
            ._form_title {
                color: rgba(51, 51, 51, 1);
                font-size: 18px;
                font-weight: 500;
            }
            ._form_export {
                width: 122px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                background-color: rgba(32, 160, 255, 1);
                border-radius: 18px;
                color: #fff;
                font-size: 14px;
                cursor: pointer;
            }
        }
        ._form_wrap {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 0 24px;
            ._form_filter {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                flex-wrap: wrap;
                ._form_items {
                    height: 36px;
                    display: flex;
                    align-items: center;
                    margin-left: 20px;
                    margin-top: 24px;
                    ._form_items_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 12px;
                        white-space: nowrap;
                    }
                }
            }
            ._formWrap {
                display: flex;
                flex-direction: column;
                flex: 1;
                min-height: 550px;
            }
        }
    }

    // 提现成功弹窗
    .zd-dialog-success {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .zd-dialog-logo {
            width: 48px;
            height: 48px;
            margin-bottom: 12px;
        }
        .zd-dialog-title {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            margin-bottom: 29px;
        }
        .zd-dialog-desc {
            color: #666666;
            font-size: 14px;
            white-space: nowrap;
            margin-bottom: 39px;
        }
        .zd-dialog-button {
            width: 180px;
            height: 32px;
            background: rgba(32, 160, 255, 1);
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 32px;
            cursor: pointer;
        }
    }
    .el-popover-hover {
        border: none;
        background: transparent !important;
        border: none;
        outline: none;
        margin-left: -20px;
    }
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 32px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>

<style lang="less">
.finance {

}
.pending-money-pop {
    width: 480px !important;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(235, 235, 235, 1) !important;
    padding: 15px !important;
    font-size: 12px !important;
    color: rgba(96, 105, 114, 1) !important;
    line-height: 19px !important;
}
</style>